<template>

    <el-form label-position="top" :model="registerForm" ref="registerForm" :rules="rules">
        <el-form-item label="Email" prop="email">
            <el-input v-model="registerForm.email"></el-input>
        </el-form-item>
        <el-form-item label="Username" prop="username">
            <el-input v-model="registerForm.username"></el-input>
        </el-form-item>
        <el-form-item label="Password" prop="password">
            <el-input v-model="registerForm.password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="Confirm password" prop="confirm_password">
            <el-input v-model="registerForm.confirm_password" type="password"></el-input>
        </el-form-item>
        <el-form-item label="Verification Code" prop="verification_code">
            <el-input v-model="registerForm.verification_code" style="width: 415px">
            </el-input>
            <img :src="`${validcodeUrl}&r=${time}`" class="verification" @click="this.reloadValidCode"/>

        </el-form-item>
        <div class="ep-form-bottom">
            <div class="ep-form-btn-panel">
                <div></div>
                <el-button style="margin-left: auto" type="primary" @click="submit('registerForm')">REGISTER</el-button>
            </div>
        </div>
    </el-form>
</template>

<script>

    import {post} from '../utils/request';

    export default {
        name: "ep-register-form",
        props: {
            actionUrl: {
                type: String
            },
            validcodeUrl: {
                type: String
            },
            ctx: {
                type: String,
                default: ""
            },
            forward: {
                type: String,
                default: ""
            }
        },
        data() {
            return {
                time: "",
                registerForm: {
                    username: "",
                    password: "",
                    confirm_password: "",
                    email: "",
                    verification_code: "",
                },
                rules: {
                    email: [
                        {
                            required: true,
                            message: "The email address in the Email field is invalid.",
                            trigger: 'blur'
                        },
                        {
                            type: 'email',
                            message: 'The Email field is not an email address.',
                            trigger: 'blur'
                        },
                    ],
                    username: [
                        {
                            required: true,
                            message: "The Username field is invalid.",
                            trigger: 'blur'
                        },
                        {
                            min: 5,
                            max: 50,
                            message: 'The Username field must be between 5 and 50.',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: "The Password field is mandatory.",
                            trigger: 'blur'
                        }
                    ],
                    confirm_password: [
                        {
                            required: true,
                            message: "The Confirm password field is mandatory.",
                            trigger: 'blur'
                        }
                    ],
                    verification_code: [
                        {
                            required: true,
                            message: "The Verification Code field is mandatory.",
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        methods: {
            reloadValidCode() {
                this.time = new Date().getTime()
            },
            submit(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        let loadingInstance = this.$loading({
                            fullscreen: true,
                            text: 'Please Wait for Response.'
                        })
                        let data = {
                            username: this.registerForm.username,
                            email: this.registerForm.email,
                            password: this.registerForm.password,
                            passwd_re: this.registerForm.confirm_password,
                            validcode: this.registerForm.verification_code,
                            license:'agree'
                        }
                        post(this.actionUrl, data).then((result) => {
                            loadingInstance.close()
                            if(result.result===1){
                                location.href=`register_success.html?mailurl=${result.mailurl}&forward=${this.forward}`;
                            }else {
                                this.$message.error(result.message)
                                this.reloadValidCode()
                            }
                        }).catch((error)=>{
                            loadingInstance.close()
                            // this.$message.error(error.message)
                            console.log(error)
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="scss">
    .el-input-group__append, .el-input-group__prepend {
        padding: 0;
    }
    .ep-form-bottom {
        padding-top: 40px;
        padding-bottom: 40px;
        .ep-form-btn-panel {
            padding: 8px 10px;
            background: #f0f0f0;
            overflow: visible;
            display: flex;
            flex-direction: row;
            align-items: center;
        }
    }

    .verification {
        width: 140px;
        height: 36px;
        margin-left: 18px;
        display: inline-block;
        position: relative;
        vertical-align: middle;
    }
</style>
